<template>
<div class="invoice">

    <div class="box">
        <div class="item flex-center-space-between text-left" v-for="item in list" :key="item.id">
            <div class="left" @click="selectChange(item.id)">
                <van-tag plain :type=" item.type === 2 ? 'danger' : 'primary' ">{{ item.type === 2 ? '增值税发票' : '普通发票' }}</van-tag> <span class="ml10">{{ item.s_name }}</span> <br/>
                <span class="mt6">{{ item.s_phone }}</span>
            </div>
            <div class="btn-key flex-center-space-between text-gray">
                <div @click="$router.push(`/addinvoice?id=${item.id}`)">
                    <svg-icon iconClass="edit"></svg-icon>
                </div>
                <div @click="del(item.id)">
                    <svg-icon iconClass="del"></svg-icon>
                </div>
            </div>
        </div>
    </div>
    <div class="footer flex-conter">
        <van-button @click="$router.push('/addinvoice')" type="danger" round size="small" style="width: 100px;"> 新增 </van-button>
    </div>
</div>
</template>

<script>
export default {
    data () {
        return {
            list: []
        }
    },
    mounted () {
        
    },
    methods: {
        selectChange (id) { // 选择提交订单发票
            if (!this.$route.query.redirect && this.$route.query.redirect !== 'checkout') return
            const invoice = this.list.find(item => item.id === id)
            this.$store.commit('user/serDefaultInvoice', invoice)
            this.$router.back()
        },
        del (id) {
            this.$dialog.confirm({
                title: '提示',
                message: '您确认删除选中发票?'
            })
            .then (() => {
                this.$buyer.invoiceDel(id).then(() => {
                    this.getlistData()
                    this.$toast('删除成功')
                })
            })
        },
        getlistData () {
            this.$buyer.invoice().then(res => {
                // console.log(res)
                this.list = res.data.list
                this.$store.commit('user/serInvoice', this.list)
            })
        }
    },
    created () {
        this.getlistData()
    }
}
</script>

<style lang="less" scoped>
.invoice {
    display: flex;
    flex-direction: column;
    .box {
        flex: 1;
        overflow-y: auto;
        padding-top: 10px;
        .item {
            height: 60px;
            background-color: #fff;
            padding: 0 20px;
            margin-bottom: 10px;
            .btn-key {
                width: 60px;
                font-size: 20px;
            }
        }
    }
    .footer {
        padding: 14px;
        background-color: #fff;
    }
}
</style>
